<!--
    by: yuanbiao 2020年12月15日
    name: x-tab
    notes:
-->
<template>
  <div :class="[
      prefixCls,`${prefixCls}-${type}`,`${prefixCls}-${size}`,
      `${prefixCls}-${shape}`,{active, 'is-disabled': disabled}
    ]"
    :disabled="disabled" @click="clickHandler"
  >
    <div :class="`${prefixCls}__icon`">
      <div :class="`${prefixCls}__icon_inner`">
        <slot name="icon"></slot>
      </div>
    </div>
    <div :class="`${prefixCls}__label`">
      <slot name="label">{{label}}</slot>
    </div>
    <div v-if="dot && badge" :class="`${prefixCls}__dot`"></div>
    <div v-else-if="showZero || badge" :class="`${prefixCls}__badge`">
      {{badge > overflowBadge ? `${overflowBadge}+` : badge}}
    </div>
  </div>
</template>

<script>
const prefixCls = 'x-tab'
export default {
  name: 'x-tab',
  props: {
    type: {
      type: String,
      default: 'default' // default|primary|dashed|text|info|success|warning|danger
    },
    size: {
      type: String,
      default: 'default' // default|large|small
    },
    shape: {
      type: String,
      default: 'rhomb' // rhomb|circle
    },
    active: {
      type: Boolean,
      default: false // true(激活状态)
    },
    label: {
      type: String,
      default: ''
    },
    badge: {
      type: Number,
      default: 0
    },
    'overflow-badge': {
      type: Number,
      default: 99
    },
    'show-zero': {
      type: Boolean,
      default: false
    },
    dot: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      prefixCls: prefixCls
    }
  },
  methods: {
    clickHandler () {
      if (this.disabled) return
      this.$emit('click')
    }
  }
}
</script>
